<template>
    <div  style="width:94%;margin:auto">
        <div style="display:flex;justify-content:space-between;">
            <h2>我的订单详情</h2>
            <div style="display:flex;flex-direction: column;justify-content: center;">
                <div>
                    <el-switch style="margin-right:10px" v-model="obj.ispay" active-color="#13ce66" 
                        inactive-color="#ff4949" active-text="已付款" inactive-text="未付款">
                    </el-switch>
                    <el-date-picker value-format="yyyy-MM-dd" type="dates" v-model="obj.tstart" placeholder="订单起始时间">
                    </el-date-picker>
                    <el-date-picker value-format="yyyy-MM-dd" style="margin-right:10px" type="dates" v-model="obj.tend" placeholder="订单结束时间">
                    </el-date-picker>
                    <el-button @click="seeAbout()"  icon="el-icon-search">查询</el-button>
                </div>
            </div>
        </div>
        <hr>
        <div style="margin-top:10px">
            <el-table border  :data="orders" >
                
                <el-table-column  prop="ordid" label="订单号" min-width="5%">
			    </el-table-column>

                <el-table-column  prop="addr" label="收货地址" min-width="25%">
			    </el-table-column>

                <el-table-column  prop="phone" label="电话" min-width="10%">
			    </el-table-column>

                <el-table-column  prop="shipno"  label="发货单号" min-width="15%">
			    </el-table-column>

                <el-table-column  prop="amount" label="总价" min-width="5%">
			    </el-table-column>

                <el-table-column  label="是否付款" min-width="10%">
                    <template slot-scope="scope">
						<p @click="fukuan(scope.row)" v-html='scope.row.ispay==1?"<span style=\"color:green;\">已付款</span>":"<span style=\"color:red;\">未付款</span>"'></p>
					</template>
			    </el-table-column>

                <el-table-column  prop="tcreate" label="下单时间" min-width="15%">
			    </el-table-column>

                <el-table-column  prop="items" label="操作" min-width="15%">
                    <template slot-scope="scope">
                        <el-popover placement="right" width="700" trigger="click">
                                <el-table :data="items" border>
                                    <el-table-column  label="图片" width="100">
                                        <template slot-scope="scope">
                                            <div style="width: 60px;height: 40px;">
                                                <el-image fit :src="`${imgUrl}/api/public/showImg/${scope.row.picture}`"
                                                    style="width: 60px; height: 40px;"></el-image>
                                            </div>
                                        </template>
                                    </el-table-column>

                                    <el-table-column property="name" label="商品名称"  width="299">
                                    </el-table-column>

                                    <el-table-column property="price" label="商品价钱"  width="100">
                                    </el-table-column>

                                    <el-table-column property="num" label="商品数量"  width="100">
                                    </el-table-column>

                                    <el-table-column label="小计"  width="100">
                                        <template slot-scope="scope">
                                            {{scope.row.num*scope.row.price}}
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <el-button @click="popover(scope.row.ordid)" slot="reference">明细</el-button>
                        </el-popover>
                    </template>
			    </el-table-column>
            </el-table>

            <div >
                <div style="margin:0 auto;width:100px;">
                    <el-button @click="showMore()" type="primary">显示更多</el-button>
                </div>
            </div>
            <hr>
        </div>
    </div>
</template>
<script>
        export default {
            name:'',
            props:[],
            data() {
                return {
                    orders:[],
                    orders2:[],
                    obj:{ispay:true,tstart:'', tend:''},
                    items:[],
                    num:5,
                }
            },
            methods:{
				fukuan(obj){
					if(obj.ispay!=1){
						this.$router.push({
							path:"/fore/order/Payment",
							query:{ordid:obj.ordid,addr:obj.addr,phone:obj.phone}
						})
					}
				},
                //查询
                seeAbout(){
                    var that = this
                    //点击查询  清空两个数组
                    this.orders = [];
                    this.orders2 = [];
					var obj = {
						ispay:this.obj.ispay==true?1:0,
						tstart:(this.obj.tstart=='' || this.obj.tstart==null)?'':this.obj.tstart[0],
						tend:(this.obj.tend=='' || this.obj.tend==null)?'':this.obj.tend[0],
					}
                    //发送请求
                    this.$postX("/api/fore/ord/findOrdLines",obj)
                    .then(function(resp){
                        //判断数据是否为空
                        var orders = resp.data.data
                        //空对象弹出错误
                        if(orders==null){
                            that.$message.error('暂无数据');
                            return;
                        }
                        //不空
                        //把条件查询的所有数据赋值给orders2
                        that.orders2 = orders
                        //循环开始显示的5条数据
                        for(let i = 0;i<5;i++){
                            //在显示的orders数组中添加拥有所有数据的orders2数组中的5条数据
                            that.orders.push(that.orders2[i])
                        }
                    })
                },
                //显示明细
                popover(id){
                    var that = this
                    this.$postX("/api/fore/ord/findItemInfoByOrdid/"+id)
                    .then(function(resp){
                        that.items = resp.data.data
                    })
                },
                //显示更多
                showMore(){
                    for(let i =this.num;i<(this.num+5);i++){
                        if(this.orders2[i]==null){
                            this.$message.error('已经没有数据啦');
                            return;
                        }
                        this.orders.push(this.orders2[i])
                    }
                    this.num+=5
                }
            },

            mounted(){
                var that = this
                this.$postX("/api/fore/ord/findOrdLines")
                .then(function(resp){
                    var orders = resp.data.data
                    that.orders2  = orders
                    for(let i = 0;i<5;i++){
                        that.orders.push(orders[i])
                    }
                })
            }
        }
</script>
<style scoped="scoped">

</style>
